<!--
 * @Author: “Jackson” “1145239633@qq.com”
 * @Date: 2025-07-19 11:32:38
 * @LastEditors: “Jackson” “1145239633@qq.com”
 * @LastEditTime: 2025-10-28 10:17:50
 * @FilePath: \shaangu-web\src\views\productInfo\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="app-container">
    <!-- <el-form
      :model="queryParams1"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <el-form-item label="任务号" prop="taskNumber">
        <el-select v-model="queryParams1.taskNumber" placeholder="请选择任务号" multiple>
          <el-option
            v-for="dict in utilitytaskList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          v-model="queryParams1.projectName"
          placeholder="请输入项目名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="图号" prop="drawingNumber">
        <el-select
          v-model="queryParams1.drawingNumber"
          placeholder="请选择图号"
          multiple
        >
          <el-option
            v-for="dict in utilityfigureList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="机型" prop="productModelCategory">
        <el-select
          v-model="queryParams1.productModelCategory"
          multiple
          placeholder="请选择机型类别"
        >
          <el-option
            v-for="dict in utilitymodelList"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row> -->
    <!-- 显示已选筛选条件 -->
    <div class="active-filters">
      <div class="filter-tags">
        <span>当前筛选条件：</span>
        <el-tag v-for="(filter, index) in activeFilters" :key="index" closable @close="removeFilter(filter.column)">
          {{ filter.text }}
        </el-tag>
        <el-button v-if="hasActiveFilters" type="text" @click="clearAllFilters" size="small">清除所有</el-button>
      </div>
    </div>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
          v-hasPermi="['product:productInfo:add']">新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="danger" icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete"
          v-hasPermi="['product:productInfo:remove']">删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" icon="el-icon-import" size="mini" @click="handleDownLoad"
          v-hasPermi="['product:productInfo:export']">导出</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-import" size="mini" @click="handleImport('importData')"
          v-hasPermi="['product:productInfo:importData']">导入产品</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-import" size="mini" @click="handleImport('importDataActual')"
          v-hasPermi="['product:productInfo:importDataActual']">导入产品工况点（实际）</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-import" size="mini" @click="handleImport('importDataTheoretical')"
          v-hasPermi="['product:productInfo:importDataTheoretical']">导入产品工况点（理论）</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="info" icon="el-icon-import" size="mini" @click="handleImport('importDataJG')"
          v-hasPermi="['product:productInfo:importDataJG']">导入结构</el-button>
      </el-col>
      <right-toolbar :search="false" :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table stripe v-loading="loading" border="" :header-cell-class-name="headerCellClassName" :data="productInfoList"
      @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" width="55" type="index" />
      <el-table-column v-for="(column, index) in columns" :key="index" :prop="column.prop" :label="column.label"
        :min-width="column.width" show-overflow-tooltip align="center">
        <template slot="header" slot-scope="scope">
          <el-popover placement="bottom" width="300" trigger="manual" v-model="column.showFilter"
            :close-on-click-modal="false" popper-class="custom-popover" @show="handlePopoverShow(column)">
            <div class="filter-content">
              <div v-if="column.filterType == 'text'">
                <el-input v-model="column.tempFilterValue" placeholder="请输入筛选内容"
                  @keyup.enter.native="applyFilters(column)"></el-input>
              </div>
              <!-- 选择器筛选 -->
              <div v-if="column.filterType == 'select'">
                <el-select v-model="column.tempFilterValue" placeholder="请选择" style="width: 100%" multiple>
                  <el-option v-for="item in column.options" :key="item.value" :label="item.label"
                    :value="item.label"></el-option>
                </el-select>
              </div>
              <!-- 日期范围筛选 -->
              <div v-if="column.filterType == 'daterange'">
                <el-date-picker v-model="column.tempFilterValue" type="daterange" range-separator="至"
                  start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%"
                  value-format="yyyy-MM-dd"></el-date-picker>
              </div>
              <div class="filter-footer">
                <el-button type="primary" size="small" @click="applyFilters(column)">确定</el-button>
                <el-button size="small" @click="cancelFilter(column)">取消</el-button>
              </div>
            </div>

            <div slot="reference" class="header-cell" @click.stop="toggleFilter(column)">
              <span>{{ column.label }}</span>
              <i class="el-icon-arrow-down filter-icon" :class="{ 'active-filter': hasFilterValue(column) }"></i>
            </div>
          </el-popover>
        </template>

        <template slot-scope="scope">
          <!-- 如果是工况点列，显示特殊样式 -->
          <div v-if="
            column.prop == 'tWorkingConditionTheoreticalList' ||
            column.prop == 'tWorkingConditionActualList'
          " style="
              border-bottom: 1px solid #0275cd;
              color: #0275cd;
              padding-bottom: 2px;
              width: 50px;
              margin: auto;
              cursor: pointer;
            " @click="openActComponents(scope.row, column.label, column.prop)">
            工况点
          </div>

          <div v-if="column.prop == 'calcFile'" style="color: #0275cd; width: 100px; cursor: pointer"
            @click="openFile(scope.row)">
            {{ scope.row[column.prop] }}
          </div>
          <!-- 其他列正常显示 -->
          <span v-else>{{ scope.row[column.prop] }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column
        v-if="columns.some((c) => c.prop == 'tWorkingConditionTheoreticalList')"
        label="工况点(理论)"
        align="center"
        min-width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div
            style="
              border-bottom: 1px solid #0275cd;
              color: #0275cd;
              padding-bottom: 2px;
              width: 50px;
              margin: auto;
            "
            @click="openActComponents(scope.row, '工况点(理论)')"
          >
            工况点
          </div>
        </template>
      </el-table-column> -->
      <!-- 工况点(实际) - 仅当 columns 包含 tWorkingConditionActualList 时显示 -->
      <!-- <el-table-column
        v-if="columns.some((c) => c.prop == 'tWorkingConditionActualList')"
        label="工况点(实际)"
        align="center"
        min-width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div
            style="
              border-bottom: 1px solid #0275cd;
              color: #0275cd;
              padding-bottom: 2px;
              width: 50px;
              margin: auto;
            "
            @click="openActComponents(scope.row, '工况点(实际)')"
          >
            工况点
          </div>
        </template>
      </el-table-column> -->

      <!-- <el-table-column
        label="图号"
        align="center"
        prop="drawingNumber"
        min-width="150"
        show-overflow-tooltip
      />

      <el-table-column
        label="任务号"
        align="center"
        prop="taskNumber"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="项目名称"
        align="center"
        prop="projectName"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="总成号"
        align="center"
        prop="assemblyNumber"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="用户"
        align="center"
        prop="userName"
        min-width="150"
        show-overflow-tooltip
      />
      10  5   5  225000   17500  650 6
      <el-table-column
        label="类别"
        align="center"
        prop="category"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="装置规模"
        align="center"
        prop="deviceScale"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="机组布置方式"
        align="center"
        prop="unitLayout"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="机型类别"
        align="center"
        prop="productModelCategory"
        min-width="150"
        show-overflow-tooltip
      />

      <el-table-column
        label="机型"
        align="center"
        prop="productModel"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="转速r/min"
        align="center"
        prop="speedRpm"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="功率"
        align="center"
        prop="powerKw"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="计算文件"
        align="center"
        prop="calcFile"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="流道高度"
        align="center"
        prop="flowPathHeight"
        min-width="150"
        show-overflow-tooltip
      />
      <el-table-column
        label="工况点(理论)"
        align="center"
        min-width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div
            style="
              border-bottom: 1px solid #0275cd;
              color: #0275cd;
              padding-bottom: 2px;
              width: 50px;
              margin: auto;
            "
            @click="openActComponents(scope.row, '工况点(理论)')"
          >
            工况点
          </div>
        </template>
      </el-table-column>

      <el-table-column
        label="最大流量"
        align="center"
        prop="maxFlow"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="最小流量"
        align="center"
        prop="minFlow"
        min-width="100"
        show-overflow-tooltip
      />
      <el-table-column
        label="工况点(实际)"
        align="center"
        min-width="150"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <div
            style="
              border-bottom: 1px solid #0275cd;
              color: #0275cd;
              padding-bottom: 2px;
              width: 50px;
              margin: auto;
            "
            @click="openActComponents(scope.row, '工况点(实际)')"
          >
            工况点
          </div>
        </template>
      </el-table-column>
      <el-table-column
        label="轴承跨距"
        align="center"
        prop="spindleSpan"
        min-width="150"
      />
      <el-table-column
        label="主轴连接"
        align="center"
        min-width="150"
        prop="spindleConnection"
      />
      <el-table-column
        min-width="150"
        label="预留级"
        align="center"
        prop="reservedStage"
      />
      <el-table-column
        label="支承轴承图号"
        align="center"
        min-width="150"
        prop="supportBearingDrawing"
      />
      <el-table-column
        label="支承轴承直径"
        align="center"
        min-width="150"
        prop="supportBearingDiameter"
      />
      <el-table-column
        label="推力轴承图号"
        align="center"
        min-width="150"
        prop="thrustBearingDrawing"
      />
      <el-table-column
        label="推力轴承位置"
        align="center"
        min-width="150"
        prop="thrustBearingPosition"
      />
      <el-table-column
        label="推力轴承直径"
        align="center"
        min-width="150"
        prop="thrustBearingDiameter"
      />
      <el-table-column
        label="机壳固定点"
        align="center"
        min-width="150"
        prop="casingFixedPoint"
      />
      <el-table-column
        label="调节缸驱动形式"
        align="center"
        min-width="150"
        prop="adjustingCylinderDriveType"
      />
      <el-table-column
        label="静叶调节范围"
        align="center"
        min-width="150"
        prop="staticBladeAdjustRange"
      />
      <el-table-column
        label="底座号"
        align="center"
        prop="baseNumber"
        min-width="150"
      />
      <el-table-column
        label="机壳"
        align="center"
        prop="casing"
        min-width="150"
      />
      <el-table-column
        label="进出口型式"
        align="center"
        prop="inletOutletType"
        min-width="150"
      />
      <el-table-column
        label="机壳型式"
        align="center"
        prop="casingType"
        min-width="150"
      />
      <el-table-column
        label="轮毂直径"
        align="center"
        prop="hubDiameter"
        min-width="150"
      />
      <el-table-column
        label="叶根型式"
        align="center"
        prop="bladeRootType"
        min-width="150"
      />
      <el-table-column
        label="出口流道高度"
        align="center"
        min-width="150"
        prop="outletChannelHeight"
      />
      <el-table-column
        label="是否事故"
        align="center"
        prop="accidentFlag"
        min-width="150"
      />
      <el-table-column label="备注" align="center" prop="remark" /> -->
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="530">
        <template slot-scope="scope">
          <!-- <el-button
            size="mini"
            type="text"
            @click="handlePhoto(scope.row)"
            v-hasPermi="['product:productInfo:photo']"
            >现场数据</el-button
          > -->
          <el-button size="mini" type="text" @click="handleUpdate(scope.row, 'all')"
            v-hasPermi="['product:productInfo:edit']">修改</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row, 'first')"
            v-hasPermi="['product:productInfo:edit1']">修改通用类</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row, 'second')"
            v-hasPermi="['product:productInfo:edit2']">修改气动类</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row, 'third')"
            v-hasPermi="['product:productInfo:edit3']">修改结构类</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row, 'forth')"
            v-hasPermi="['product:productInfo:edit4']">修改文件事故类</el-button>
          <el-button size="mini" type="text" @click="handleUpdate(scope.row, 'fifth')"
            v-hasPermi="['product:productInfo:edit5']">修改其余字段</el-button>
          <el-button size="mini" type="text" @click="handleDelete(scope.row)"
            v-hasPermi="['product:productInfo:remove']">删除</el-button>
          <el-button size="mini" type="text" @click="handleAnnex(scope.row)"
            v-hasPermi="['product:productInfo:file']">附件</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
      @pagination="getList" />

    <!-- 添加或修改产品项目技术信息对话框 -->
    <el-dialog :title="title" v-dialogDrag :visible.sync="open" width="940px" append-to-body
      :close-on-click-modal="false">
      <el-tabs type="border-card" v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="通用类" name="first" v-if="showHeader"></el-tab-pane>
        <el-tab-pane label="气动类" name="second" v-if="showHeader"></el-tab-pane>
        <el-tab-pane label="结构类" name="third" v-if="showHeader"></el-tab-pane>
        <el-tab-pane label="文件事故类" name="forth" v-if="showHeader"></el-tab-pane>
        <el-tab-pane label="其余字段" name="fifth" v-if="showHeader"></el-tab-pane>
        <el-form ref="form" :model="form" :rules="rules" label-width="140px" class="addDatas" :inline="true">
          <div v-if="activeName == 'first'">
            <el-form-item label="图号" prop="drawingNumber">
              <!-- <el-select v-model="form.drawingNumber" placeholder="请选择图号">
                <el-option
                  v-for="dict in utilityfigureList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                ></el-option>
              </el-select> -->
              <el-input v-model="form.drawingNumber" placeholder="请输入图号" />
            </el-form-item>
            <el-form-item label="任务号" prop="taskNumber">
              <!-- <el-select v-model="form.taskNumber" placeholder="请选择任务号">
                <el-option
                  v-for="dict in utilitytaskList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                ></el-option>
              </el-select> -->

              <el-input v-model="form.taskNumber" placeholder="请输入任务号" />
            </el-form-item>
            <el-form-item label="总成号" prop="assemblyNumber">
              <el-input v-model="form.assemblyNumber" placeholder="请输入总成号" />
            </el-form-item>
            <el-form-item label="用户" prop="userName">
              <el-input v-model="form.userName" placeholder="请输入用户" />
            </el-form-item>
            <el-form-item label="项目名称" prop="projectName">
              <el-input v-model="form.projectName" placeholder="请输入项目名称" />
            </el-form-item>
            <el-form-item label="项目类别" prop="category">
              <el-select v-model="form.category" placeholder="请选择项目类别">
                <el-option v-for="dict in utilitytypeList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="装置规模" prop="deviceScale">
              <el-select v-model="form.deviceScale" placeholder="请选择装置规模">
                <el-option v-for="dict in utilityscaleList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="机组布置方式" prop="unitLayout">
              <el-select v-model="form.unitLayout" placeholder="请选择机组布置方式">
                <el-option v-for="dict in utilityunitList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="工质" prop="productMedium">
              <el-input v-model="form.productMedium" placeholder="请输入工质" />
            </el-form-item>
            <el-form-item label="转速r/min" prop="speedRpm">
              <el-input v-model="form.speedRpm" placeholder="请输入转速r/min" />
            </el-form-item>
                <el-form-item label="机型" prop="productModel">
              <el-input v-model="form.productModel" placeholder="请输入机型" />
            </el-form-item>
            <el-form-item label="产品级数" prop="productStageCount">
              <el-input v-model="form.productStageCount" placeholder="请输入产品级数" />
            </el-form-item>

            <!-- <el-form-item label="机型类别" prop="productModelCategory">
              <el-select
                v-model="form.productModelCategory"
                placeholder="请选择机型类别"
              >
                <el-option
                  v-for="dict in utilitymodelList"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.label"
                ></el-option>
              </el-select>
            </el-form-item> -->
        
            <!-- <el-form-item label="机型级数" prop="productModelCode">
              <el-input
                v-model="form.productModelCode"
                placeholder="请输入机型级数"
              />
            </el-form-item> -->

            <el-form-item label="驱动机功率" prop="driverPower">
              <el-input v-model="form.driverPower" placeholder="请输入驱动机功率" />
            </el-form-item>
          </div>
          <div v-if="activeName == 'second'">
            <el-form-item label="计算文件名" prop="calcFile">
              <!-- <file-upload v-model="form.calcFile" /> -->
              <el-input v-model="form.calcFile" placeholder="请输入计算文件名" />
            </el-form-item>
            <el-form-item label="相对高度" prop="relativeHeight">
              <el-input v-model="form.relativeHeight" placeholder="请输入相对高度" />
            </el-form-item>

            <el-form-item label="最大流量(Nm3/min)" prop="maxFlow">
              <el-input v-model="form.maxFlow" placeholder="请输入最大流量(Nm3/min)" />
            </el-form-item>
            <el-form-item label="最小流量(Nm3/min)" prop="minFlow">
              <el-input v-model="form.minFlow" placeholder="请输入最小流量(Nm3/min)" />
            </el-form-item>

            <el-form-item label="启动角度(°)" prop="startupAngle">
              <el-input v-model="form.startupAngle" placeholder="请输入启动角度(°)" />
            </el-form-item>
            <el-form-item label="安全运行角(°)" prop="safeOperatingAngle">
              <el-input v-model="form.safeOperatingAngle" placeholder="请输入安全运行角(°)" />
            </el-form-item>
            <el-form-item label="长期最小运行角(°)" prop="longTermMinOperatingAngle">
              <el-input v-model="form.longTermMinOperatingAngle" placeholder="请输入长期最小运行角(°)" />
            </el-form-item>
            <el-form-item label="最大静叶角度(°)" prop="maxStaticBladeAngle">
              <el-input v-model="form.maxStaticBladeAngle" placeholder="请输入最大静叶角度(°)" />
            </el-form-item>
            <el-form-item label="启动内功率（kW)" prop="startupInternalPower">
              <el-input v-model="form.startupInternalPower" placeholder="请输入启动内功率（kW)" />
            </el-form-item>
            <div class="addData">
              <div class="title">工况点(理论)</div>
              <el-button type="primary" @click="addTheoretical" size="mini" class="add-btn">新 增</el-button>
            </div>
            <el-table :data="form.tworkingConditionTheoreticalList" border max-height="300">
              <el-table-column label="	工况名称" align="center" prop="conditionName" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="进口态流量 m3/min" align="center" prop="inletVolumeM3Min" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="标态流量 Nm3/min" align="center" prop="standardVolumeNm3Min" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="进气法兰处压力 pj bar(a)" align="center" prop="inletPressurePjBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="进气温度 Tj ℃" align="center" prop="inletTemperatureTj" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="相对湿度 %" align="center" prop="humidityPercent" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="排气法兰处压力 bar(a)" align="center" prop="outletPressureBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="排气温度 ℃" align="center" prop="outletTemperature" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="	静叶角度 °" align="center" prop="statorBladeAngle" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="多变效率 %" align="center" prop="polytropicEfficiency" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="内功率 kW" align="center" prop="internalPowerKw" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="工作转速 r/min" align="center" prop="rotationSpeedRpm" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                width="120">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleUpdateTheoretical(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" @click="handleDeleteTheoretical(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>

            <div class="addData">
              <div class="title">工况点(实际)</div>
              <el-button type="primary" @click="addActual" size="mini" class="add-btn">新 增</el-button>
            </div>
            <el-table :data="form.tworkingConditionActualList" border max-height="300">
              <el-table-column label="时间点" align="center" prop="conditionName" min-width="150" show-overflow-tooltip />
              <el-table-column label="标态流量 Nm3/min" align="center" prop="standardVolumeNm3Min" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="进气法兰处压力 pj bar(a)" align="center" prop="inletPressurePjBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="进气温度 Tj ℃" align="center" prop="inletTemperatureTj" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="排气法兰处压力 bar(a)" align="center" prop="outletPressureBar" min-width="180"
                show-overflow-tooltip />
              <el-table-column label="排气温度 ℃" align="center" prop="outletTemperature" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="	静叶角度 °" align="center" prop="statorBladeAngle" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="工作转速 r/min" align="center" prop="rotationSpeedRpm" min-width="150"
                show-overflow-tooltip />
              <el-table-column label="采集人" align="center" prop="collector" min-width="150" show-overflow-tooltip />
              <el-table-column label="备注" align="center" prop="remark" min-width="150" show-overflow-tooltip />
              <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right"
                width="120">
                <template slot-scope="scope">
                  <el-button size="mini" type="text" @click="handleUpdateActual(scope.row)">修改</el-button>
                  <el-button size="mini" type="text" @click="handleDeleteActual(scope.row)">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div v-if="activeName == 'third'">
            <el-form-item label="轴承跨距(mm)" prop="spindleSpan">
              <el-input v-model="form.spindleSpan" placeholder="请输入轴承跨距(mm)" />
            </el-form-item>
            <el-form-item label="主轴连接" prop="spindleConnection">
              <el-select v-model="form.spindleConnection" placeholder="请选择主轴连接">
                <el-option v-for="dict in structuralspindleList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="流道高度" prop="flowPathHeight">
              <el-input
                v-model="form.flowPathHeight"        flowPathHeight   reservedStage
                placeholder="请输入流道高度"
              />
            </el-form-item> -->
            <el-form-item label="预留级" prop="reservedStage">
              <!-- <el-input
                v-model="form.reservedStage"
                placeholder="请输入预留级"
              /> -->
              <el-select v-model="form.reservedStage">
                <el-option v-for="(item, index) in reservedStageList" :key="index" :value="item.name"
                  :label="item.name">
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="支承轴承图号" prop="supportBearingDrawing">
              <el-input v-model="form.supportBearingDrawing" placeholder="请输入支承轴承图号" />
            </el-form-item>
            <el-form-item label="支承轴承直径(mm)" prop="supportBearingDiameter">
              <el-input v-model="form.supportBearingDiameter" placeholder="请输入支承轴承直径(mm)" />
            </el-form-item>
            <el-form-item label="推力轴承图号" prop="thrustBearingDrawing">
              <el-input v-model="form.thrustBearingDrawing" placeholder="请输入推力轴承图号" />
            </el-form-item>
            <el-form-item label="推力轴承位置" prop="thrustBearingPosition">
              <el-select v-model="form.thrustBearingPosition" placeholder="请选择推力轴承位置">
                <el-option v-for="dict in structuralchassisList" :key="dict.value" :label="dict.label"
                  :value="dict.value"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="推力轴承直径(mm)" prop="thrustBearingDiameter">
              <el-input v-model="form.thrustBearingDiameter" placeholder="请输入推力轴承直径 (mm)" />
            </el-form-item>
            <el-form-item label="机壳固定点" prop="casingFixedPoint">
              <el-select v-model="form.casingFixedPoint" placeholder="请选择机壳固定点">
                <el-option v-for="dict in structuralchassisList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="调节缸驱动形式" prop="adjustingCylinderDriveType">
              <el-select v-model="form.adjustingCylinderDriveType" placeholder="请选择调节缸驱动形式">
                <el-option v-for="dict in structuraldriveList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="底座号" prop="baseNumber">
              <el-input v-model="form.baseNumber" placeholder="请输入底座号" />
            </el-form-item>
            <el-form-item label="机壳图号" prop="casing">
              <el-input v-model="form.casing" placeholder="请输入机壳图号" />
            </el-form-item>
            <el-form-item label="进出口型式" prop="inletOutletType">
              <el-select v-model="form.inletOutletType" placeholder="请选择进出口型式">
                <el-option v-for="dict in structuralexportList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="机壳型式" prop="casingType">
              <el-select v-model="form.casingType" placeholder="请选择机壳型式">
                <el-option v-for="dict in structuralenclosureList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="轮毂直径 (mm)" prop="hubDiameter">
              <el-input v-model="form.hubDiameter" placeholder="请输入轮毂直径(mm)" />
            </el-form-item>
            <el-form-item label="叶根型式" prop="bladeRootType">
              <el-select v-model="form.bladeRootType" placeholder="请选择叶根型式">
                <el-option v-for="dict in structuralfixingList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="出口流道高度 (mm)" prop="outletChannelHeight">
              <el-input v-model="form.outletChannelHeight" placeholder="请输入出口流道高度 (mm)" />
            </el-form-item>

            <el-form-item label="静叶调节范围" prop="staticBladeAdjustRange">
              <el-select v-model="form.staticBladeAdjustRange" placeholder="请选择静叶调节范围">
                <el-option v-for="dict in structuralbladeList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="activeName == 'forth'">
            <el-form-item label="是否事故" prop="accidentFlag">
              <el-select v-model="form.accidentFlag" placeholder="请选择">
                <el-option v-for="dict in accidentFlagList" :key="dict.value" :label="dict.label"
                  :value="dict.label"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="事故报告名称" prop="accidentReport">
              <el-input v-model="form.accidentReport" placeholder="请输入事故报告名称" />
            </el-form-item>
          </div>
          <div v-if="activeName == 'fifth'">
            <el-form-item v-for="item in remarkFields" :key="item.field" :label="item.label" :prop="item.field">
              <el-input v-model="form[item.field]" :placeholder="'请输入' + item.label" />
            </el-form-item>
          </div>
          <div class="dialog-footer footers">
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
          </div>
        </el-form>
      </el-tabs>
    </el-dialog>
    <el-dialog v-dialogDrag :close-on-click-modal="false" title="工况点(实际)" :visible.sync="Actualopen" width="800px"
      append-to-body>
      <el-form ref="Actualform" :model="Actualform" :rules="Actualrules" label-width="140px" :inline="true">
        <el-form-item label="时间点" prop="conditionName">
          <el-input v-model="Actualform.conditionName" placeholder="请输入时间点" />
        </el-form-item>
        <el-form-item label="标态流量 Nm3/min" prop="standardVolumeNm3Min">
          <el-input v-model="Actualform.standardVolumeNm3Min" placeholder="请输入标态流量 Nm3/min" />
        </el-form-item>
        <el-form-item label="进气法兰处压力pj" prop="inletPressurePjBar">
          <el-input v-model="Actualform.inletPressurePjBar" placeholder="请输入进气法兰处压力pj" />
        </el-form-item>
        <el-form-item label="进气温度Tj" prop="inletTemperatureTj">
          <el-input v-model="Actualform.inletTemperatureTj" placeholder="请输入进气温度Tj" />
        </el-form-item>
        <el-form-item label="排气法兰处压力" prop="outletPressureBar">
          <el-input v-model="Actualform.outletPressureBar" placeholder="请输入排气法兰处压力" />
        </el-form-item>
        <el-form-item label="排气温度" prop="outletTemperature">
          <el-input v-model="Actualform.outletTemperature" placeholder="请输入排气温度" />
        </el-form-item>
        <el-form-item label="静叶角度" prop="statorBladeAngle">
          <el-input v-model="Actualform.statorBladeAngle" placeholder="请输入静叶角度" />
        </el-form-item>
        <el-form-item label="工作转速" prop="rotationSpeedRpm">
          <el-input v-model="Actualform.rotationSpeedRpm" placeholder="请输入工作转速" />
        </el-form-item>
        <el-form-item label="采集人" prop="collector">
          <el-input v-model="Actualform.collector" placeholder="请输入采集人" />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input style="width: 555px" v-model="Actualform.remark" placeholder="请输入备注" type="textarea" rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormActual">确 定</el-button>
        <el-button @click="cancelActual">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog v-dialogDrag :close-on-click-modal="false" title="工况点(理论)" :visible.sync="Theoreticalopen" width="800px"
      append-to-body>
      <el-form ref="Theoreticalform" :model="Theoreticalform" :rules="Theoreticalrules" label-width="140px"
        :inline="true">
        <el-form-item label="工况名称" prop="conditionName">
          <el-input v-model="Theoreticalform.conditionName" placeholder="请输入工况名称" />
        </el-form-item>
        <el-form-item label="进口态流量 m3/min" prop="inletVolumeM3Min">
          <el-input v-model="Theoreticalform.inletVolumeM3Min" placeholder="请输入进口态流量 m3/min" />
        </el-form-item>
        <el-form-item label="标态流量 Nm3/min" prop="standardVolumeNm3Min">
          <el-input v-model="Theoreticalform.standardVolumeNm3Min" placeholder="请输入标态流量 Nm3/min" />
        </el-form-item>
        <el-form-item label="进气法兰处压力pj" prop="inletPressurePjBar">
          <el-input v-model="Theoreticalform.inletPressurePjBar" placeholder="请输入进气法兰处压力pj" />
        </el-form-item>
        <el-form-item label="进气温度Tj" prop="inletTemperatureTj">
          <el-input v-model="Theoreticalform.inletTemperatureTj" placeholder="请输入进气温度Tj" />
        </el-form-item>
        <el-form-item label="相对湿度" prop="humidityPercent">
          <el-input v-model="Theoreticalform.humidityPercent" placeholder="请输入相对湿度" />
        </el-form-item>
        <el-form-item label="排气法兰处压力" prop="outletPressureBar">
          <el-input v-model="Theoreticalform.outletPressureBar" placeholder="请输入排气法兰处压力" />
        </el-form-item>
        <el-form-item label="排气温度" prop="outletTemperature">
          <el-input v-model="Theoreticalform.outletTemperature" placeholder="请输入排气温度" />
        </el-form-item>
        <el-form-item label="静叶角度" prop="statorBladeAngle">
          <el-input v-model="Theoreticalform.statorBladeAngle" placeholder="请输入静叶角度" />
        </el-form-item>
        <el-form-item label="多变效率" prop="polytropicEfficiency">
          <el-input v-model="Theoreticalform.polytropicEfficiency" placeholder="请输入多变效率" />
        </el-form-item>
        <el-form-item label="内功率" prop="internalPowerKw">
          <el-input v-model="Theoreticalform.internalPowerKw" placeholder="请输入内功率" />
        </el-form-item>
        <el-form-item label="工作转速" prop="rotationSpeedRpm">
          <el-input v-model="Theoreticalform.rotationSpeedRpm" placeholder="请输入工作转速" />
        </el-form-item>
        <el-row>
          <el-col :span="24">
            <el-form-item label="备注" prop="remark">
              <el-input style="width: 555px" v-model="Actualform.remark" placeholder="请输入备注" type="textarea" rows="3" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFormTheoretical">确 定</el-button>
        <el-button @click="cancelTheoretical">取 消</el-button>
      </div>
    </el-dialog>
    <!-- <photoComponents
      :openPhoto="openPhoto"
      :photoId="photoId"
    ></photoComponents> -->
    <ActComponents @closeAct="closeAct" :photoId="photoId" :ActProps="ActProps" :ActTitle="ActTitle" :openAct="openAct">
    </ActComponents>
  
    <!-- 导入对话框 -->
    <el-dialog v-dialogDrag :close-on-click-modal="false" :title="upload.title" :visible.sync="upload.open"
      width="400px" append-to-body>
      <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip text-center" slot="tip">
          <div class="el-upload__tip" slot="tip">
            <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的用户数据
          </div>
          <span>仅允许导入xls、xlsx格式文件。</span>
          <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
            @click="importTemplate">下载模板</el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <el-dialog title="在线预览" :visible.sync="lineOpen" width="900px" append-to-body v-dialogDrag>
      <div style="display: flex;justify-content: flex-end;margin: 10px;">
        <el-button @click="handleExports(fileUrl)" size="mini" type="primary">下载</el-button>
      </div>
      <PdfViewer v-if="fileType === 'pdf' && fileUrl" :fileUrl="fileUrl" @loading="handleLoading"
        @error="handleError" />

      <DocxViewer v-else-if="fileType === 'docx' && fileUrl" :fileUrl="fileUrl" @loading="handleLoading"
        @error="handleError" />

      <ExcelViewer v-else-if="fileType === 'xlsx' && fileUrl" :fileUrl="fileUrl" @loading="handleLoading"
        @error="handleError" />


         <el-image v-else-if="fileType === 'png' || fileType === 'jpg' || fileType === 'jpeg' "
        style=" width: 100px; height: 100px" :src="fileUrl" :preview-src-list="[fileUrl]">
      </el-image>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import photoComponents from "./photo.vue";
import ActComponents from "./Act.vue";
import {
  listProductInfo,
  getProductInfo,
  delProductInfo,
  addProductInfo,
  updateProductInfo,
  getInfoByName,
} from "@/api/product/productInfo";
import { fieldMap } from "@/api/system/roleSetting";
import { dictList } from "@/api/select";

import PdfViewer from "../../components/PdfViewer.vue";
import DocxViewer from "../../components/DocxViewer.vue";
import ExcelViewer from "../../components/ExcelViewer.vue";
// 提取公共处理函数
const processDictData = (rows) => {
  return rows.map((item) => ({
    ...item,
    value: item.dictValue,
    label: item.dictLabel,
  }));
};
export default {
  name: "ProductInfo",
  components: {
    photoComponents,
    ActComponents,
    PdfViewer,
    DocxViewer,
    ExcelViewer,
  },
  data() {
    return {
      ActProps: '',
      reservedStageList: [
        {
          name: "有",
          value: "有",
          label: "有",
        },
        {
          name: "无",
          value: "无",
          label: "无",
        },
      ],
      lineOpen: false,
      fileUrl: "",
      fileType: "docx",
      loadings: false,
      errors: "",
      showHeader: true,
      fileData: "",
      remarkFields: [],
      queryParams1: {
        taskNumber: [],
        drawingNumber: [],
        productModelCategory: [],
        projectName: "",
      },
      // 用户导入参数
      upload: {
        type: "",
        // 是否显示弹出层（用户导入）
        open: false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/product/productInfo/importData",
      },
      utilitymodelList: [],
      utilityfigureList: [],
      utilitytaskList: [],
      utilitytypeList: [],
      utilityscaleList: [],
      utilityunitList: [],
      structuralspindleList: [],
      structuralchassisList: [],
      structuraldriveList: [],
      structuralbladeList: [],
      structuralexportList: [],
      structuralenclosureList: [],
      structuralfixingList: [],
      // 所有的字段信息
      fieldMapDatas: [],
      // 数组中循环展示prop
      columns: [],
      // 根据角色展示的字段名
      fieldList: [],
      ActTitle: "",
      openAct: false,
      photoId: "",
      openPhoto: false,
      //(实际)
      currentEditIndex1: -1, // 当前编辑项的索引
      currentEditIndex: -1, // Track the index of the row being edited
      Theoreticalform: {},
      Theoreticalrules: {},
      Actualform: {},
      Actualrules: {},
      Theoreticalopen: false,
      Actualopen: false,
      accidentFlagList: [
        {
          value: 1,
          label: "是",
        },
        {
          value: 2,
          label: "否",
        },
      ],
      activeName: "first",
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 产品项目技术信息表格数据
      productInfoList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   drawingNumber: null,
      //   taskNumber: null,
      //   assemblyNumber: null,
      //   userName: null,
      //   projectName: null,
      //   category: null,
      //   productMedium: null,
      //   deviceScale: null,
      //   unitLayout: null,
      //   productModel: null,
      //   productStageCount: null,
      //   speedRpm: null,
      //   powerKw: null,
      //   calcFile: null,
      //   flowPathHeight: null,
      //   maxFlow: null,
      //   minFlow: null,
      //   spindleSpan: null,
      //   spindleConnection: null,
      //   reservedStage: null,
      //   supportBearingDrawing: null,
      //   supportBearingDiameter: null,
      //   thrustBearingDrawing: null,
      //   thrustBearingPosition: null,
      //   thrustBearingDiameter: null,
      //   casingFixedPoint: null,
      //   adjustingCylinderDriveType: null,
      //   staticBladeAdjustRange: null,
      //   baseNumber: null,
      //   casing: null,
      //   inletOutletType: null,
      //   casingType: null,
      //   hubDiameter: null,
      //   bladeRootType: null,
      //   outletChannelHeight: null,
      //   accidentFlag: null,
      // },
      // 表单参数
      form: {
        tworkingConditionActualList: [],
        tworkingConditionTheoreticalList: [],
      },
      // 表单校验
      rules: {
        // projectName: [
        //   { required: true, message: "项目名称不能为空", trigger: "blur" },
        // ],
        // drawingNumber: [
        //   { required: true, message: "图号不能为空", trigger: "blur" },
        // ],
        // taskNumber: [
        //   { required: true, message: "任务号不能为空", trigger: "blur" },
        // ],
        // assemblyNumber: [
        //   { required: true, message: "总成号不能为空", trigger: "blur" },
        // ],
        // userName: [
        //   { required: true, message: "用户不能为空", trigger: "blur" },
        // ],
        // category: [
        //   { required: true, message: "类别不能为空", trigger: "blur" },
        // ],
        // deviceScale: [
        //   { required: true, message: "装置规模不能为空", trigger: "blur" },
        // ],
        // unitLayout: [
        //   { required: true, message: "机组布置方式不能为空", trigger: "blur" },
        // ],
        // productModelCategory: [
        //   { required: true, message: "机型类别不能为空", trigger: "blur" },
        // ],
        // productModel: [
        //   { required: true, message: "机型不能为空", trigger: "blur" },
        // ],
        // speedRpm: [
        //   { required: true, message: "转速不能为空", trigger: "blur" },
        // ],
        // powerKw: [{ required: true, message: "功率不能为空", trigger: "blur" }],
        // calcFile: [
        //   { required: true, message: "计算文件不能为空", trigger: "blur" },
        // ],
        // flowPathHeight: [
        //   { required: true, message: "流道高度不能为空", trigger: "blur" },
        // ],
        // maxFlow: [
        //   { required: true, message: "最大流量不能为空", trigger: "blur" },
        // ],
        // minFlow: [
        //   { required: true, message: "最小流量不能为空", trigger: "blur" },
        // ],
        // spindleSpan: [
        //   { required: true, message: "轴承跨距不能为空", trigger: "blur" },
        // ],
        // spindleConnection: [
        //   { required: true, message: "主轴连接不能为空", trigger: "blur" },
        // ],
        // reservedStage: [
        //   { required: true, message: "预留级不能为空", trigger: "blur" },
        // ],
        // supportBearingDrawing: [
        //   { required: true, message: "支承轴承图号不能为空", trigger: "blur" },
        // ],
        // supportBearingDiameter: [
        //   { required: true, message: "支承轴承直径不能为空", trigger: "blur" },
        // ],
        // thrustBearingDrawing: [
        //   { required: true, message: "推力轴承图号不能为空", trigger: "blur" },
        // ],
        // thrustBearingPosition: [
        //   { required: true, message: "推力轴承位置不能为空", trigger: "blur" },
        // ],
        // thrustBearingDiameter: [
        //   { required: true, message: "推力轴承直径不能为空", trigger: "blur" },
        // ],
        // casingFixedPoint: [
        //   { required: true, message: "机壳固定点不能为空", trigger: "blur" },
        // ],
        // adjustingCylinderDriveType: [
        //   {
        //     required: true,
        //     message: "调节缸驱动形式不能为空",
        //     trigger: "blur",
        //   },
        // ],
        // staticBladeAdjustRange: [
        //   { required: true, message: "静叶调节范围不能为空", trigger: "blur" },
        // ],
        // baseNumber: [
        //   { required: true, message: "底座号不能为空", trigger: "blur" },
        // ],
        // casing: [{ required: true, message: "机壳不能为空", trigger: "blur" }],
        // inletOutletType: [
        //   { required: true, message: "进出口型式不能为空", trigger: "blur" },
        // ],
        // casingType: [
        //   { required: true, message: "机壳型式不能为空", trigger: "blur" },
        // ],
        // hubDiameter: [
        //   { required: true, message: "轮毂直径不能为空", trigger: "blur" },
        // ],
        // bladeRootType: [
        //   { required: true, message: "叶根型式不能为空", trigger: "blur" },
        // ],
        // outletChannelHeight: [
        //   { required: true, message: "出口流道高度不能为空", trigger: "blur" },
        // ],
        // accidentFlag: [
        //   { required: true, message: "是否事故不能为空", trigger: "blur" },
        // ],
      },
    };
  },
  computed: {
    // 已激活的筛选条件（已点击确定的）
    activeFilters() {
      const filters = [];
      this.columns.forEach((column) => {
        if (this.hasFilterValue(column)) {
          let text = "";
          if (column.filterType === "text" && column.filterValue) {
            text = `${column.label}: ${column.filterValue}`;
          } else if (
            column.filterType === "select" &&
            column.filterValue.length > 0
          ) {
            const selectedOptions = column.options
              .filter((opt) => column.filterValue.includes(opt.label))
              .map((opt) => opt.label)
              .join(", ");
            text = `${column.label}: ${selectedOptions}`;
          } else if (
            column.filterType === "daterange" &&
            column.filterValue.length === 2
          ) {
            text = `${column.label}: ${column.filterValue[0]} 至 ${column.filterValue[1]}`;
          }

          if (text) {
            filters.push({
              column: column.prop,
              text: text,
            });
          }
        }
      });
      return filters;
    },

    // 是否有激活的筛选条件
    hasActiveFilters() {
      return this.activeFilters.length > 0;
    },

    // 构建查询参数（使用已确定的filterValue）
    queryParams() {
      const params = {};
      (params.pageNum = 1),
        (params.pageSize = 10),
        this.columns.forEach((column) => {
          if (this.hasFilterValue(column)) {
            params[column.prop] = column.filterValue;
          }
        });
      return params;
    },
  },
  created() {
    let data = localStorage.getItem("fieldName");
    this.fieldList = data.split(",");
    console.log(this.fieldList, "this.fieldList");
    fieldMap().then((res) => {
      this.fieldMapDatas = res.rows;
      console.log(this.fieldMapDatas, "this.fieldMapDatas");

      const remarkFields = this.fieldMapDatas.filter(
        (item) => item.field && item.field.toLowerCase().includes("remark")
      );
      this.remarkFields = remarkFields;
    });

    // 并行请求字典数据
    Promise.all([
      dictList({ dictType: "utilitymodel" }),
      dictList({ dictType: "utilitytype" }),
      dictList({ dictType: "utilityscale" }),
      dictList({ dictType: "utilityunit" }),
      dictList({ dictType: "structuralspindle" }),
      dictList({ dictType: "structuralchassis" }),
      dictList({ dictType: "structuraldrive" }),
      dictList({ dictType: "structuralblade" }),
      dictList({ dictType: "structuralexport" }),
      dictList({ dictType: "structuralenclosure" }),
      dictList({ dictType: "structuralfixing" }),
    ]).then(
      ([
        utilitymodelRes,
        utilitytypeRes,
        utilityscaleRes,
        utilityunitRes,
        structuralspindleRes,
        structuralchassisRes,
        structuraldriveRes,
        structuralbladeRes,
        structuralexportRes,
        structuralenclosureRes,
        structuralfixingRes,
      ]) => {
        this.utilitymodelList = processDictData(utilitymodelRes.rows);
        this.utilitytypeList = processDictData(utilitytypeRes.rows);
        this.utilityscaleList = processDictData(utilityscaleRes.rows);
        this.utilityunitList = processDictData(utilityunitRes.rows);
        this.structuralspindleList = processDictData(structuralspindleRes.rows);
        this.structuralchassisList = processDictData(structuralchassisRes.rows);
        this.structuraldriveList = processDictData(structuraldriveRes.rows);
        this.structuralbladeList = processDictData(structuralbladeRes.rows);
        this.structuralexportList = processDictData(structuralexportRes.rows);
        this.structuralenclosureList = processDictData(
          structuralenclosureRes.rows
        );
        this.structuralfixingList = processDictData(structuralfixingRes.rows);
        this.getList();
      }
    );
  },
  methods: {
      handleExports(row) {
       window.open(this.fileUrl);
    },
    handleLoading(loading) {
      this.loadings = loading;
      this.$emit("loading", loading);
    },
    handleError(error) {
      this.errors = error;
      this.$emit("error", error);
    },
    handleDownLoad() {
      let url = "/product/productInfo/export";
      this.download(
        url,
        {
          ids: this.ids,
        },
        `产品项目技术信息_${new Date().getTime()}.xlsx`
      );
    },
    openFile(row, title) {
      getInfoByName(row.calcFile).then((res) => {
        if (res.data) {
          this.fileUrl = res.data.filePath;

          // 从URL中提取文件扩展名
          const extension = this.fileUrl.split(".").pop().toLowerCase();
          this.fileType = extension;
          this.lineOpen = true;
        }
      });
    },
    /** 导入按钮操作 */
    handleImport(type) {
      this.upload.title =
        type == "importData"
          ? "导入产品"
          : type == "importDataActual"
            ? "导入产品工况点（实际）"
            : type == "importDataTheoretical"
              ? "导入产品工况点（理论）"
              : "导入结构";
      this.upload.open = true;
      this.upload.type = type;
      this.upload.url =
        type == "importData" || type == "importDataJG"
          ? process.env.VUE_APP_BASE_API + "/product/productInfo/importData"
          : type == "importDataActual"
            ? process.env.VUE_APP_BASE_API +
            "/product/productInfo/importDataActual"
            : process.env.VUE_APP_BASE_API +
            "/product/productInfo/importDataTheoretical";
    },
    /** 下载模板操作 */
    importTemplate() {
      let url =
        this.upload.type == "importData"
          ? "/product/productInfo/importTemplate"
          : this.upload.type == "importDataActual"
            ? "/product/productInfo/importTemplateActual"
            : this.upload.type == "importDataTheoretical"
              ? "/product/productInfo/importTemplateTheoretical"
              : "/product/productInfo/importTemplateProductConstruction";

      this.download(
        url,
        {},
        `${this.upload.type == "importData"
          ? "导入产品模板"
          : this.upload.type == "importDataActual"
            ? "导入产品工况点（实际）模板"
            : this.upload.type == "importDataTheoretical"
              ? "导入产品工况点（理论）模板"
              : "导入结构模板"
        }.xlsx`
      );
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false;
      this.upload.isUploading = false;
      this.upload.updateSupport = 0;
      this.$refs.upload.clearFiles();
      this.$alert(
        "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
        response.msg +
        "</div>",
        "导入结果",
        { dangerouslyUseHTMLString: true }
      );
      this.productInfoList = [];
      this.getList();
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit();
    },
    handleAnnex(row) {
      this.$router.push({
        path: "/attachment/attachmentUpload",
        query: {
          projectId: row.id,
          fileType: 1,
          // queryParams: JSON.stringify(this.queryParams),
          // paths: "/product/productInfo",
        },
      });
    },
    // 判断列是否有筛选值（使用已确定的filterValue）
    hasFilterValue(column) {
      if (column.filterType === "daterange") {
        return column.filterValue && column.filterValue.length === 2;
      } else if (column.filterType === "select") {
        return column.filterValue && column.filterValue.length > 0;
      }
      return (
        column.filterValue !== "" &&
        column.filterValue !== null &&
        column.filterValue !== undefined
      );
    },

    // 切换筛选框显示状态
    toggleFilter(column) {
      // 关闭其他所有筛选框
      this.columns.forEach((col) => {
        if (col.prop !== column.prop) {
          col.showFilter = false;
        }
      });

      // 初始化临时筛选值为当前已确定的筛选值
      if (column.filterType === "daterange") {
        column.tempFilterValue = column.filterValue.length
          ? [...column.filterValue]
          : [];
      } else if (column.filterType === "select") {
        column.tempFilterValue = [...column.filterValue];
      } else {
        column.tempFilterValue = column.filterValue;
      }
      column.showFilter = !column.showFilter;
    },
    handlePopoverShow(column) {
      // 确保只有一个 popover 显示
      this.columns.forEach((col) => {
        if (col.prop !== column.prop) {
          col.showFilter = false;
        }
      });
    },
    // 应用筛选（点击确定）
    applyFilters(column) {
      // 将临时值赋给正式筛选值
      if (column.filterType === "daterange") {
        column.filterValue = column.tempFilterValue.length
          ? [...column.tempFilterValue]
          : [];
      } else if (column.filterType === "select") {
        column.filterValue = [...column.tempFilterValue];
      } else {
        column.filterValue = column.tempFilterValue;
      }

      // 关闭弹窗
      column.showFilter = false;

      // 调用接口获取数据
      this.getList();
    },

    // 取消筛选（点击取消）
    cancelFilter(column) {
      // 不保存临时值，直接关闭弹窗
      column.showFilter = false;
    },

    // 移除单个筛选条件
    removeFilter(columnProp) {
      const column = this.columns.find((col) => col.prop === columnProp);
      if (column) {
        if (column.filterType === "daterange") {
          column.filterValue = [];
        } else if (column.filterType === "select") {
          column.filterValue = [];
        } else {
          column.filterValue = "";
        }
        // 重新获取数据
        this.getList();
      }
    },

    // 清除所有筛选条件
    clearAllFilters() {
      this.columns.forEach((column) => {
        if (column.filterType === "daterange") {
          column.filterValue = [];
        } else if (column.filterType === "select") {
          column.filterValue = [];
        } else {
          column.filterValue = "";
        }
        column.showFilter = false;
      });
      // 重新获取数据
      this.getList();
    },
    // 表头单元格类名
    headerCellClassName() {
      return "table-header-center";
    },
    closeAct() {
      this.openAct = false;
    },
    openActComponents(row, title, props) {
      this.photoId = row.id;
      this.openAct = true;
      this.ActTitle = title;
      this.ActProps = props;
    },
    handlePhoto(row) {
      this.photoId = row.id;
      this.openPhoto = true;
    },
    // 取消按钮
    cancelActual() {
      this.currentEditIndex1 = -1;
      this.Actualopen = false;
      this.resetActual();
    },
    // 表单重置
    resetActual() {
      this.Actualform = {
        id: null,
        projectId: null,
        conditionName: null,
        standardVolumeNm3Min: null,
        inletPressurePjBar: null,
        inletTemperatureTj: null,
        outletPressureBar: null,
        outletTemperature: null,
        statorBladeAngle: null,
        rotationSpeedRpm: null,
        collector: null,
        remark: null,
      };
      this.resetForm("Actualform");
    },
    // 提交实际工况表单
    submitFormActual() {
      this.$refs.Actualform.validate((valid) => {
        if (valid) {
          const formData = { ...this.Actualform };
          if (!this.form.tworkingConditionActualList) {
            this.form.tworkingConditionActualList = [];
          }
          if (this.currentEditIndex1 === -1) {
            // 新增操作
            if (!formData.id) {
              formData.temp_id = this.generateTempId(); // 为新增数据生成临时ID
            }
            this.form.tworkingConditionActualList.push(formData);
          } else {
            // 修改操作
            if (formData.id) {
              // 根据ID修改
              const index = this.form.tworkingConditionActualList.findIndex(
                (item) => item.id === formData.id
              );
              if (index !== -1) {
                this.form.tworkingConditionActualList.splice(
                  index,
                  1,
                  formData
                );
              }
            } else {
              // 没有ID，根据行数据匹配修改
              this.form.tworkingConditionActualList.splice(
                this.currentEditIndex1,
                1,
                formData
              );
            }
          }

          this.Actualopen = false;
          this.resetActual();
        }
      });
    },

    // 修改实际工况
    handleUpdateActual(row) {
      this.activeName = "first";
      this.Actualopen = true;
      this.Actualform = { ...row };

      // 查找当前编辑项的索引
      if (row.id) {
        this.currentEditIndex1 =
          this.form.tworkingConditionActualList.findIndex(
            (item) => item.id === row.id
          );
      } else {
        this.currentEditIndex1 =
          this.form.tworkingConditionActualList.findIndex((item) =>
            this.isSameRow(item, row)
          );
      }
    },

    // 删除实际工况
    handleDeleteActual(row) {
      this.$confirm("确认删除该实际工况点?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.id) {
            // 根据ID删除
            const index = this.form.tworkingConditionActualList.findIndex(
              (item) => item.id === row.id
            );
            if (index !== -1) {
              this.form.tworkingConditionActualList.splice(index, 1);
            }
          } else {
            // 没有ID，根据索引删除
            const index = this.form.tworkingConditionActualList.findIndex(
              (item) => this.isSameRow(item, row)
            );
            if (index !== -1) {
              this.form.tworkingConditionActualList.splice(index, 1);
            }
          }
          this.$message.success("删除成功!");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },
    // 新增实际
    addActual() {
      this.Actualopen = true;
      this.currentEditIndex1 = -1;
      this.resetActual();
    },

    // 新增理论
    addTheoretical() {
      this.Theoreticalopen = true;
      this.currentEditIndex = -1;
      this.resetTheoreticalform();
    },
    // 取消按钮
    cancelTheoretical() {
      this.Theoreticalopen = false;
      this.currentEditIndex = -1;
      this.resetTheoreticalform();
    },
    /** 修改按钮操作 */
    handleUpdateTheoretical(row) {
      this.Theoreticalopen = true;
      this.Theoreticalform = { ...row };
      // 查找当前编辑项的索引
      if (row.id) {
        this.currentEditIndex =
          this.form.tworkingConditionTheoreticalList.findIndex(
            (item) => item.id === row.id
          );
      } else {
        this.currentEditIndex =
          this.form.tworkingConditionTheoreticalList.findIndex((item) =>
            this.isSameRow(item, row)
          );
      }
    },
    // 生成临时ID
    generateTempId() {
      return "temp_" + Date.now() + Math.floor(Math.random() * 1000);
    },
    // 判断两行数据是否相同
    isSameRow(row1, row2) {
      const keys = Object.keys(row1);
      return keys.every((key) => row1[key] === row2[key]);
    },
    // 删除按钮
    handleDeleteTheoretical(row) {
      this.$confirm("确认删除该工况点?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          if (row.id) {
            // 根据ID删除
            const index = this.form.tworkingConditionTheoreticalList.findIndex(
              (item) => item.id === row.id
            );
            if (index !== -1) {
              this.form.tworkingConditionTheoreticalList.splice(index, 1);
            }
          } else {
            // 没有ID，根据索引删除
            const index = this.form.tworkingConditionTheoreticalList.findIndex(
              (item) => this.isSameRow(item, row)
            );
            if (index !== -1) {
              this.form.tworkingConditionTheoreticalList.splice(index, 1);
            }
          }
          this.$message.success("删除成功!");
        })
        .catch(() => {
          this.$message.info("已取消删除");
        });
    },

    // 提交表单
    submitFormTheoretical() {
      this.$refs.Theoreticalform.validate((valid) => {
        if (valid) {
          const formData = { ...this.Theoreticalform };
          if (!this.form.tworkingConditionTheoreticalList) {
            this.form.tworkingConditionTheoreticalList = [];
          }
          if (this.currentEditIndex === -1) {
            // 新增操作
            if (!formData.id) {
              formData.temp_id = this.generateTempId(); // 为新增数据生成临时ID
            }

            this.form.tworkingConditionTheoreticalList.push(formData);
          } else {
            // 修改操作
            if (formData.id) {
              // 根据ID修改
              const index =
                this.form.tworkingConditionTheoreticalList.findIndex(
                  (item) => item.id === formData.id
                );
              if (index !== -1) {
                this.form.tworkingConditionTheoreticalList.splice(
                  index,
                  1,
                  formData
                );
              }
            } else {
              // 没有ID，根据行数据匹配修改
              this.form.tworkingConditionTheoreticalList.splice(
                this.currentEditIndex,
                1,
                formData
              );
            }
          }

          this.Theoreticalopen = false;
          this.resetTheoreticalform();
        }
      });
    },
    // 表单重置
    resetTheoreticalform() {
      this.Theoreticalform = {
        id: null,
        projectId: null,
        conditionName: null,
        inletVolumeM3Min: null,
        standardVolumeNm3Min: null,
        inletPressurePjBar: null,
        inletTemperatureTj: null,
        humidityPercent: null,
        outletPressureBar: null,
        outletTemperature: null,
        statorBladeAngle: null,
        polytropicEfficiency: null,
        internalPowerKw: null,
        rotationSpeedRpm: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        delFlag: null,
      };
      this.resetForm("Theoreticalform");
    },
    handleClick(tab, event) {
      this.activeName = tab.name;
    },
    getList() {
      this.loading = true;
      this.productInfoList = [];
      if (this.columns.length === 0) {
        this.fieldList.forEach((item) => {
          this.fieldMapDatas.forEach((items) => {
            if (item == items.field) {
              this.columns.push({
                prop: items.field,
                label: items.label,
                width: "150",
                filterType: this.getfilterType(items.field),
                filterValue:
                  this.getfilterType(items.field) == "text" ? "" : [],
                tempFilterValue:
                  this.getfilterType(items.field) == "text" ? "" : [],
                showFilter: false,
                options:
                  this.getfilterType(items.field) == "text"
                    ? []
                    : this.getOptions(items.field),
              });
            }
          });
        });
      }

      listProductInfo(this.queryParams)
        .then((response) => {
          this.productInfoList = response.rows.map((item) => {
            const filteredItem = {};
            filteredItem.id = item.id;
            this.fieldList.forEach((field) => {
              const lowerField = field.toLowerCase();
              const actualKey = Object.keys(item).find(
                (key) => key.toLowerCase() === lowerField
              );
              if (actualKey !== undefined) {
                filteredItem[field] = item[actualKey];
              }
            });
            return filteredItem;
          });

          this.total = response.total;
          console.log(this.productInfoList, " this.productInfoList");
          console.log(this.columns);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    getOptions(field) {
      if (field == "category") {
        return this.utilitytypeList;
      }
      if (field == "deviceScale") {
        return this.utilityscaleList;
      }
      if (field == "unitLayout") {
        return this.utilityunitList;
      }
      if (field == "productModelCategory") {
        return this.utilitymodelList;
      }
      if (field == "spindleConnection") {
        return this.structuralspindleList;
      }
      if (field == "thrustBearingPosition") {
        return this.structuralchassisList;
      }
      if (field == "casingFixedPoint") {
        return this.structuralchassisList;
      }
      if (field == "adjustingCylinderDriveType") {
        return this.structuraldriveList;
      }
      if (field == "staticBladeAdjustRange") {
        return this.structuralbladeList;
      }
      if (field == "inletOutletType") {
        return this.structuralexportList;
      }
      if (field == "casingType") {
        return this.structuralenclosureList;
      }
      if (field == "bladeRootType") {
        return this.structuralfixingList;
      }
      if (field == "accidentFlag") {
        return this.accidentFlagList;
      }
      if (field == "reservedStage") {
        return this.reservedStageList;
      }
    },
    getfilterType(field) {
      const selectFields = [
        "category",
        "deviceScale",
        "unitLayout",
        "reservedStage",
        "spindleConnection",
        "thrustBearingPosition",
        "casingFixedPoint",
        "adjustingCylinderDriveType",
        "staticBladeAdjustRange",
        "inletOutletType",
        "casingType",
        "bladeRootType",
        "accidentFlag",
      ];
      return selectFields.includes(field) ? "select" : "text";
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        drawingNumber: null,
        taskNumber: null,
        assemblyNumber: null,
        userName: null,
        projectName: null,
        category: null,
        productMedium: null,
        deviceScale: null,
        unitLayout: null,
        productModel: null,
        productStageCount: null,
        speedRpm: null,
        powerKw: null,
        calcFile: null,
        relativeHeight: null,
        maxFlow: null,
        minFlow: null,
        spindleSpan: null,
        spindleConnection: null,
        reservedStage: null,
        supportBearingDrawing: null,
        supportBearingDiameter: null,
        thrustBearingDrawing: null,
        thrustBearingPosition: null,
        thrustBearingDiameter: null,
        casingFixedPoint: null,
        adjustingCylinderDriveType: null,
        staticBladeAdjustRange: null,
        baseNumber: null,
        casing: null,
        inletOutletType: null,
        casingType: null,
        hubDiameter: null,
        bladeRootType: null,
        outletChannelHeight: null,
        accidentFlag: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
        remark: null,
        remark1: null,
        remark2: null,
        remark3: null,
        remark4: null,
        remark5: null,
        remark6: null,
        remark7: null,
        remark8: null,
        remark9: null,
        remark10: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      (this.queryParams1 = {
        taskNumber: [],
        drawingNumber: [],
        productModelCategory: [],
        projectName: "",
      }),
        this.resetForm("queryForm1");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.activeName = "first";
      this.reset();
      this.open = true;
      this.showHeader = true;
      this.title = "添加产品项目技术信息";
    },
    /** 修改按钮操作 */
    handleUpdate(row, type) {
      this.reset();
      const id = row.id || this.ids;
      if (type != "all") {
        this.showHeader = false;
        this.activeName = type;
      } else {
        this.showHeader = true;
        this.activeName = "first";
      }
      getProductInfo(id).then((response) => {
        this.form = response.data;
        this.form.tworkingConditionTheoreticalList = this.form
          .tworkingConditionTheoreticalList
          ? this.form.tworkingConditionTheoreticalList
          : [];
        this.form.tworkingConditionActualList = this.form
          .tworkingConditionActualList
          ? this.form.tworkingConditionActualList
          : [];
        this.open = true;
        this.title = "修改产品项目技术信息";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateProductInfo(this.form).then((response) => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addProductInfo(this.form).then((response) => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal
        .confirm("是否确认删除产品项目技术信息数据项？")
        .then(function () {
          return delProductInfo(ids);
        })
        .then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "product/productInfo/export",
        {
          ...this.queryParams,
        },
        `productInfo_${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-table .table-header-center {
  text-align: center;

  .cell {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
  }
}

.header-cell {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  cursor: pointer;

  >span {
    margin-right: 6px;
  }

  .filter-icon {
    font-size: 14px;
    color: #c0c4cc;
    transition: all 0.3s;

    &.active-filter {
      color: #0275cd;
    }
  }

  &:hover .filter-icon {
    color: #0275cd;
  }
}

.filter-content {
  padding: 10px;

  >div {
    margin-bottom: 10px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .filter-footer {
    margin-top: 10px;
    text-align: right;
  }
}

.active-filters {
  margin-bottom: 15px;
  padding: 12px;
  background-color: #f8fbff;
  border-radius: 4px;
  border: 1px solid #f8fbff;

  .filter-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;

    >span {
      font-size: 14px;
      color: #606266;
    }

    .el-tag {
      margin-right: 8px;
    }

    .el-button {
      margin-left: 10px;
    }
  }
}

::v-deep .el-table {
  th {
    background-color: #f8f8f9;
  }

  td {
    padding: 8px 0;
  }

  .el-table__body-wrapper {
    overflow-x: auto;
  }
}

.custom-popover {
  z-index: 9999 !important;
  position: fixed !important;
}

::v-deep .custom-popover {
  z-index: 9999 !important;
}

::v-deep .el-select-dropdown {
  z-index: 9999 !important;
}

::v-deep .el-tabs__content {
  .el-input {
    width: 280px !important;
  }
}

::v-deep .addDatas {
  .el-input {
    width: 280px !important;
  }
}

.footers {
  text-align: right;
  margin-top: 20px;
}

.addData {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* 垂直居中 */
  margin: 20px 0;
  width: 100%;

  /* 改为 100% 或移除固定宽度 */
  .title {
    font-weight: bold;
    margin-left: 5px;
    border-left: 4px solid #0275cd;
    padding-left: 10px;
  }

  .add-btn {
    /* 强制覆盖可能的全局样式 */
    padding: 7px 15px !important;
    font-size: 12px !important;
  }
}
</style>
